<template>
<div class="geren">
  <public-com></public-com>
  <div class="gere">
    <div class="flex box">
      <div class="flexc box1">
        <div class="biaoti flex">
          <img
            src="https://visitor.pku.edu.cn/visitor/resource/images/img_small9.jpg"
            alt=""
          />
          <h1>北京大学欢迎您</h1>
        </div>
        <div class="flexd">
          <p>
            个人参观北大校园需要进行网上预约。我校同时提供微信预约和网站预约两种方式，微信预约名额较多，网站预约名额较少。建议您用微信扫描下方二维码使用“参观北大”小程序进行“刷脸”预约，您也可以关注“北京大学”微信公众号，点击“参观北大”进行“刷脸”预约。
            <br />祝您参观愉快！
          </p>
          <img
            src="https://visitor.pku.edu.cn/visitor/resource/images/campus_guide.jpg"
            style="width: 100px"
          />
        </div>
        <div class="tiao">
        <router-link to="/wyyy"><img src="https://visitor.pku.edu.cn/visitor/resource/images/botton3.png" style="width:60px"></router-link>
        <router-link to="/wdyy"><img src="https://visitor.pku.edu.cn/visitor/resource/images/botton2.png" style="width:60px"></router-link>
        <router-link to=""><img src="https://visitor.pku.edu.cn/visitor/resource/images/botton1.png" style="width:60px"></router-link>
      </div>
      </div>
      <div class="box2">
        <img
          src="https://visitor.pku.edu.cn/visitor/resource/images/img_right3.jpg"
          
        />
      </div>
      
    </div>
    
  </div><footer-com></footer-com>
</div>
</template>
<script>
import PublicCom from '@/components/PublicCom.vue'
import FooterCom from '@/components/FooterCom.vue'
export default {
    components: {
    PublicCom,
    FooterCom
    
  },
  
};
</script>
<style scoped>
.gere {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-bottom: 300px;
}
.biaoti > h1 {
  border-bottom: 2px solid #94070a;
  margin-bottom: 10px;
}
.box {
  display: flex;
  margin-top: 30px;
}
.box1 {
  margin-right: 15%;
}
.tiao{
  display: flex;
  margin-top: 50px;
justify-content: space-around
}


</style>